<template>
  <div>
    <!-- 打印合同 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <el-button @click="num = num - 1">上一页</el-button>
      <el-button @click="num++">下一页</el-button>
      <hr />
      <p>{{ pageCount }}</p>
      <p>{{ currentPage }}</p>
      <el-button @click="print">打印合同</el-button>
      <pdf
        src="./sxt.pdf"
        ref="mypdf"
        :page="num"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
      ></pdf>

      <!-- 底部内容 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 导出表格 -->
    <div class="biaoge">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <el-button @click="exportData">导出表格</el-button>
      <el-button @click="lianxi">输出</el-button>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import { export2Excel } from "../../common/util";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      dialogVisible: false,
      num: 1,
      currentPage: 0,
      pageCount: 0,
      columns: [
        //定义表头
        { title: "日期", key: "date" },
        { title: "姓名", key: "name" },
        { title: "地址", key: "address" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    print() {
      this.$refs.mypdf.print();
      //   console.log(this.$refs.mypdf.print());
    },
    exportData() {
      export2Excel(this.columns, this.tableData);
    },
    lianxi() {
      let obj = {};
      let str;
      Object.defineProperty(obj, "name", {
        enumerable: true,
        configurable: true,
        get() {
          // 读，当我们读取时，则会执行到get，比如obj.name
          // return 'swr' // 当我们obj.name进行读取时，会返回'swr'
          return str;
        },
        set(newValue) {
          // 写，当我们写入时，则会执行到set，比如obj.name = 'swr'
          // 并且会把newValue作为参数传进去
          str = newValue;
        },
      });

      obj.name = "swr"; // 写入
      console.log(obj.name); // 'swr'  // 读取
    },
  },
};
</script>

<style>
</style>